<template>
  <div class="setting-pannel-wrap xFbackgroundProps">
    <span class="label">背景图片</span>
    <div class="file-list" style="margin-top: 10px;margin-bottom: 10px;" v-if="backgroundImage">
      <div class="item" :style="getStyle(backgroundImage)">
        <div class="tool-list">
          <i class="iconfont icon-edit" @click="_beforeOpen"></i>
          <i class="iconfont icon-delete" @click="del()"></i>
        </div>
      </div>
    </div>
    <add-assets @before-open="_beforeOpen" />
    <span class="label">背景颜色</span>
    <div class="setting-item"><compact v-model="colors" /></div>
    <span class="label">更多颜色</span>
    <div class="setting-item"><sketch v-model="colors" /></div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex';
import AddAssets from '@/components/program-editor/add-assets';
import { Sketch, Compact } from '@/components/color-picker';
import uploadMixin from '@/mixins/assets-upload-mixin';

export default {
  name: 'setting-scene-bg',
  components: {
    AddAssets,
    Sketch,
    Compact
  },
  props: {
    backgroundImage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      colors: {
        saturation: 100,
        hex: '#194d33',
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1
      },
      bagimg: ''
    };
  },
  mixins: [uploadMixin],
  computed: {
    ...mapGetters('programs', ['currScene'])
  },
  watch: {
    backgroundImage(v1, v2) {
      this.initData();
    },
    colors(v1, v2) {
      const color = `rgba(${v1.rgba.r},${v1.rgba.g},${v1.rgba.b},${v1.rgba.a})`;
      this.updateSceneStyle({
        backgroundColor: color
      });
    }
  },
  methods: {
    ...mapMutations('material', ['setMaterialInfo']),
    ...mapMutations('programs', ['updateSceneStyle']),
    ...mapActions('programs', ['delBackgroundImage']),
    initData() {
      this.bagimg = this.backgroundImage;
    },
    del() {
      this.updateSceneStyle({ backgroundImage: '' });
    },
    _beforeOpen() {
      this.beforeOpen({
        cid: 2,
        limit: 1,
        propName: {
          commonStyle: 'backgroundImage'
        },
        selelcted: this.backgroundImage
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.setting-item {
  position: relative;
  margin-bottom: 10px;
  z-index: 2;
  text-align: center;
}
</style>
